<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<%@ include file="/common/scooter/include/common-base.jsp"%>
	<script src="${ctx}/js/jquery-md5-min.js"></script>
	<title>用户注册-${titleName}</title>
	<script type="text/javascript">
        function viewVerifyCode() {
            document.getElementById("verifyCode").style.visibility = "visible";
            document.getElementById("verifyCode").src = ctx + "/web/CheckRandCode?" + Math.random();
        }
	</script>
</head>

<body>
<header>
</header>
<script>$("header").load("/wcm/scooter/html/top.html");</script>

<div class="container">
	<div class="row">
		<div class="col-sm-offset-1 col-lg-8">
			<div class="panel">
				<div class="panel-heading text-center">
					<h3 class="text-success">
						用户注册
					</h3>
				</div>
				<div class="panel-body" id="table1">
					<!-- 注册内容主体 start -->
					<form class="form-horizontal" role="form" name="frm1" id="frm1" action="javascript:void(0)">
						<input type="hidden" name="formToken" id="formToken" value="${formToken}">
						<input type="hidden" name="doCode" id="doCode" value="regDymic">
						<input type="hidden" name="pageName"  value="regIndex-customer-p"/>
						<input type="hidden" name="formName"  value="addForm"/>
						<input type="hidden" name="uctUser.orgId" value="285673c58a4e490b9ec11bffa0dbd275"/>
						<input type="hidden" name="uctUser.orgEname" value="le"/>
						<input type="hidden" name="uctUser.deptId" value=""/>
						<input type="hidden" name="uctUser.deptName" value=""/><!--部门名称-->
						<input type="hidden" name="uctUser.sysEname" value="${sysName}"/>
						<input type="hidden" name="uctUser.userStatus" value="1"/><!--用户状态 1启用,0停用,-1删除-->
						<input type="hidden" name="uctUser.delStatus" value="0"/><!--是否系统用户 1系统用户,0非系统用户-->
						<input type="hidden" name="uctUser.userType" value="customer"/><!--用户类型manager(管理员)/customer（客户）-->
						<input type="hidden" name="uctUser.regSource" value="web"/><!--注册来源    web：来自互联网注册  plate：后台开户-->
						<input type="hidden" name="uctUser.auditStatus" value="91"/><!-- 审核状态待审核：10待审核 ；91审核通过；90审核不通过-->
						<input type="hidden" name="uctUser.customerType" value="person"/><!--个人/机构 -->
						<input type="hidden" name="rand" id="randCode_form" />

						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>登录名：</label>
							<div class="col-sm-9">
								<input    type="text" class="form-control clean" id="frm1_login_username" name="uctUser.userEname" tip="请输入登录名" placeholder="请输入登录名（6-20位英文字母加数字）" abc="1" maxlength="20" style="color: rgb(0, 0, 0);"/>
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>姓名/单位名称：</label>
							<div class="col-sm-9">
								<input type="text" class="form-control clean" id="frm1_login_usercname" name="uctUser.userCname" tip="请输入用户名称" placeholder="请输入真实姓名" abc="1" maxlength="20" style="color: rgb(0, 0, 0);">
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>登录密码：</label>
							<div class="col-sm-9">
								<input type="password" class="form-control clean" id="frm1_login_password" name="uctUser.userPass" tip="请输入密码" placeholder="请输入登录密码">
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>确认密码：</label>
							<div class="col-sm-9">
								<input type="password" class="form-control clean" id="frm1_login_password2" name="userPass2" tip="请输入确认密码" placeholder="请再次输入密码">
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>手机号码：</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" name="uctUser.mobile" id="frm1_login_mobile" tip="请输入手机号码" placeholder="请输入手机号码" abc="1" minlength="11" maxlength="11" style="color: rgb(0, 0, 0);">
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>电子邮箱：</label>
							<div class="col-sm-9">
								<input type="text" class="form-control clean" name="uctUser.email" id="frm1_login_email" tip="请输入电子邮箱" placeholder="请填写真实有效的邮箱地址，用于找回密码" abc="1" minlength="50" maxlength="50" style="color: rgb(0, 0, 0);">
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>验证码：</label>
							<div class="col-sm-6">
								<input id="rand" size="4" maxlength="6" style="width:50%; margin-right:5px;" placeholder="请输入验证码"
									   class="form-control clean" > <input name="flagDiv"
																		   id="flagDiv" type="hidden" value="" /> <img border="0"
																													   id="verifyCode" src="" onclick="viewVerifyCode();" align="absmiddle" />
								<script>
                                    viewVerifyCode();
								</script>
								<div id="error-message" class="col-xs-4 col-sm-7 msg" ></div>
							</div>
						</div>
						<div class="form-group col-sm-12" >

							<div class="form-group text-center" >
								<button type="button" onclick="regUser()"  class="btn btn-warning btn-lg" style="width:300px;">立即注册</button>
							</div>
						</div>

					</form>


					<!-- 注册内容主体 end -->
				</div>
				<br/>
				<div id="table2" style="height: 400px;display: none;margin-top: 30px;">
					<div class="form-group">
						<div  class="text-center">
							<h3>
								<font color="red">恭喜，您已经成功注册，登录名为：<span id="userName"></span>
								</font>
							</h3>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>
<!--底部开始--->
<footer class="footer">
</footer>
<script>$("footer").load("/wcm/scooter/html/bottom.html");</script>
<!--底部结束--->
</body>

<script type="text/javascript">
    $(function(){
        setValidate("frm1");//校验
    });

    function regUser(){
        //1.校验规则-表单提交时触发
        var validate = $('#frm1').data('bootstrapValidator').validate();
        if(!validate.isValid()){ //如果校验不通过
            return;
        }

        var rand = $('#rand').val();
        if (rand == null || rand == "") {
            setErrMsg('请输入验证码');
            $('#rand').focus();
            return;
        }
        $("#randCode_form").val($("#rand").val());

        var index_submit = layer.confirm('您确定要提交注册吗？', {btn: ['是','否'],closeBtn: 0,offset: '220px'}
            , function(){
                layer.close(index_submit);
                var index_load = layer.load(1, {shade: false});
                var pass = $('#frm1').find('input[name="uctUser.userPass"]').val();
                pass = pass.md5();
                $('#frm1').find('input[name="uctUser.userPass"]').val(pass);

                $.ajax({
                    url:ctx+"/res/uct/regDymic",
                    data:$("#frm1").serialize(),
                    dataType:'json',
                    type:'post',
                    success:function(myData){
                        layer.close(index_load);
                        //console.log(myData);
                        if(myData.flag=="T"){
                            $("#table1").attr("style","display: none");
                            $("#table2").show();
                            $("#userName").text($("#frm1_login_username").val());
                        }else{
                            layer.msg(myData.msg, {offset: '200px'});
                        }
                    }
                });
            });

    }

    function setErrMsg(msg) {
        $("#error-message").html("<font color='red'>" + msg + "</font>");
    }
    //1.校验规则-定义
    function setValidate(formId){
        $('#'+formId).bootstrapValidator({
            // excluded: [':disabled'],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {

                "uctUser.userEname": {
                    validators: {
                        notEmpty: {
                            message: '请填写账号名！'
                        },
                        regexp:{
                            regexp:/^[a-zA-Z0-9_-]{6,20}$/,
                            message:'可填写6~20位的英文、数字或下划线组合'
                        },
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: ctx+'/trans/list/?doCode=isExist',
                            message: '用户已存在',//提示消息
                            delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'post'//请求方式
                            /**自定义提交数据，默认值提交当前input value
                             data: function(validator) {
                             return {
                                 password: $('[name="passwordNameAttributeInYourForm"]').val()
                                 whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                             }
                          }
                             */
                        }
                    }
                },
                "uctUser.userCname": {
                    validators: {
                        notEmpty: {
                            message: '请填写真实姓名！'
                        }
                    }
                },
                "uctUser.mobile": {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空！'
                        },
                        regexp: {
                            regexp:/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
                            message: '手机号格式不正确！'
                        }
                    }
                },
                "uctUser.userPass":{
                    validators: {
                        notEmpty: {
                            message: '密码不能为空！'
                        }/**,
                        different: {
                            field: 'uctUser.userEname',
                            message: '密码不能与登录名重复！'
                        },
                        regexp:{
                            regexp:/^(?!.([111111]|[123456]))([A-Z]|[a-z]|[0-9]|[`~!@#$%^&*()+=|{}':;',\\\\[\\\\].<>?~！@#￥%……&*（）——+|{}【】‘；：”“'。，、？]){6,20}$/,
                            message:'密码不能过于简单，密码格式可包含：6-20 位，字母、数字、字符！'
                        }**/
                    }
                },
                "userPass2":{
                    validators: {
                        notEmpty: {
                            message: '请输入确认密码！'
                        },
                        identical: {
                            field: 'uctUser.userPass',
                            message: '两次输入密码不一致！'
                        }
                    }
                },
                "uctUser.email": {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空！'
                        },
                        emailAddress: {
                            message: '请输入正确的邮箱格式'
                        },
                        regexp:{
                            regexp:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
                            message:'您输入的邮箱不合法！请填写真实有效的邮箱地址，用于找回密码。'
                        }
                    }
                }

            }
        });
    }
</script>
</html>
